import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Pressable,
} from 'react-native';
import { ServerInfo } from '../types/Card';

interface ServerInfoProps {
  server: ServerInfo | null;
  onScanPress: () => void;
  isScanning: boolean;
}

export const ServerInfoComponent: React.FC<ServerInfoProps> = ({
  server,
  onScanPress,
  isScanning,
}) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>服务器状态</Text>
      
      {server ? (
        <View style={styles.serverInfo}>
          <Text style={styles.serverText}>
            📡 {server.isHttps ? 'HTTPS' : 'HTTP'}: {server.ip}:{server.port}
          </Text>
          <Text style={styles.serverUrl}>{server.url}</Text>
          <Text style={styles.serverStatus}>✅ 已连接</Text>
        </View>
      ) : (
        <View style={styles.noServer}>
          <Text style={styles.noServerText}>未连接到服务器</Text>
          <Text style={styles.noServerHint}>点击"扫描网络"发现 BabyTapMobile 设备</Text>
        </View>
      )}
      
      <Pressable
        style={[styles.scanButton, isScanning && styles.scanningButton]}
        onPress={onScanPress}
        disabled={isScanning}>
        <Text style={styles.scanButtonText}>
          {isScanning ? '扫描中...' : '扫描网络'}
        </Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f8f9fa',
    borderRadius: 8,
    margin: 10,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  serverInfo: {
    marginBottom: 15,
  },
  serverText: {
    fontSize: 16,
    color: '#28a745',
    marginBottom: 5,
  },
  serverUrl: {
    fontSize: 14,
    color: '#666',
    fontFamily: 'monospace',
  },
  noServer: {
    marginBottom: 15,
  },
  noServerText: {
    fontSize: 16,
    color: '#dc3545',
  },
  noServerHint: {
    fontSize: 12,
    color: '#666',
    marginTop: 5,
  },
  serverStatus: {
    fontSize: 12,
    color: '#28a745',
    marginTop: 5,
  },
  scanButton: {
    backgroundColor: '#007bff',
    padding: 12,
    borderRadius: 6,
    alignItems: 'center',
  },
  scanningButton: {
    backgroundColor: '#6c757d',
  },
  scanButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
}); 